<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-row>
        <el-button type="primary" @click="handleEdit('','add')">新增分组</el-button>
      </el-row>
      <br/>
      <div class="custom-tree-container">
        <div class="block">
          <el-tree
            :data="tableData"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }" style="margin: 5px">
                <span>{{ node.label }}</span>
                <span>
                    <el-button
                      size="mini"
                      style="margin: 5px"
                      @click="handleEdit(data,'add')">
                      加子项
                    </el-button>
                    <el-button
                      size="mini"
                      style="margin: 5px"
                      @click="handleEdit(data,'edit')">
                      编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      style="margin: 5px"
                      @click="handleDeleteAlert( scope.row)">
                      删除
                    </el-button>

                </span>
              </span>
          </el-tree>
        </div>
      </div>



      <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible" :close-on-click-modal="dialog.close">
        <el-form :model="group">
          <el-form-item label="分组名" label-width="100px">
            <el-input v-model="group.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { baseUrl,baseImgPath } from '../../api/env';
export default {
  data(){

    return {
      baseUrl,
      baseImgPath,
      uploadUrl:baseUrl+'/common/imageUpload',
      loading:false,
      group:{
        id:0,
        parent_id:0,
        name:"",
      },
      dialog:{
        dialogFormVisible:false,
        title:"新增分组",
        close:false,
      },
      group_dialog:{
        dialogFormVisible:false,
        title:"总部分组",
        close:false,
      },
      tableData: null,
      groupChecks:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created(){
    this.initData();
  },
  methods: {
    initData(){
      this.loading = true;
      var that = this;
      that.$api.get('/admin/article/group/tree', {}, response => {
        if (response.status >= 200 && response.status < 300) {
          var res = response.data;
          if (res.code == 0) {
            that.tableData = JSON.parse(JSON.stringify(res.data.articleGroupsTree));
            console.log(that.tableData);
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }
        this.loading = false;
      });
    },

    handleBeforeRemove(file, fileList){
      var that = this;
      this.$confirm('此操作将删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.handleRemove(file, fileList);
      }).catch(() => {

      });
      return false;
    },



    handleEdit(row,action) {
      if(action == "edit"){
        this.dialog.title = "修改分组";
        this.group.id = row.id;
        this.group.name = row.name;
        this.group.parent_id = row.parentID;
        this.dialog.dialogFormVisible = true;
      }else if(action == "add"){
        this.dialog.title = "修改分组";
        this.group.id = 0;
        if(row != ''){
          console.log(row);
          this.group.parent_id = row.id;
        }else{
          this.group.parent_id = 0;
        }
        this.group.name = "";
        this.dialog.dialogFormVisible = true;
      }
    },


    handleSave() {
      this.loading = true;
      var that = this;

      that.$api.post('/admin/article/group', that.group, response => {
        if (response.status >= 200 && response.status < 300) {
          console.log(response.data);
          var res = response.data;
          if (res.code == 0) {
            this.$message({
              message: that.dialog.title+'成功',
              type: 'success'
            });
            this.dialog.dialogFormVisible = false;
            this.initData();
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }

      });

      this.loading = false;
    },
    handleDeleteAlert(row) {
      this.$confirm('此操作将删除该分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(row);
      }).catch(() => {

      });
    },
    handleDelete(row) {
      this.loading = true;
      var that = this;
      that.$api.delete('/admin/article/group/'+row.id, null, response => {
        if (response.status >= 200 && response.status < 300) {
          console.log(response.data);
          var res = response.data;
          if (res.code == 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.initData();
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
            this.loading = false;
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
          this.loading = false;
        }

      });
    },
  },
}
</script>

<style lang="less">
@import '../../style/mixin';
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container{
  padding: 20px;
  text-align: left;
}
.Pagination{
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
[role=treeitem]{
  margin-top: 10px;
  margin-bottom: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
